<template>
  <div class="vaw-header-layout">
    <div class="logo-wrapper">
      <ly-logo :always-show="true" />
    </div>
    <div class="menu-wrapper"></div>
    <div class="right-wrapper">
      <ly-action-items />
    </div>
    <div class="avatar-wrapper">
      <ly-v-a-w-avatar />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import LyLogo from "@/layouts/components/LyLogo.vue";
import LyActionItems from "@/layouts/components/LyActionItems.vue";
import LyVAWAvatar from "@/layouts/components/LyVAWAvatar.vue";

@Component({
  name: "LyHeader",
  components: {},
})
export default class LyHeader extends Vue {
  //#region vue prop =================================
  //#endregion
  //#region vue data =================================
  //#endregion
  //#region computed getter =================================
  //#endregion
  //#region vue life =================================
  // created() {
  //   console.log("LyHeader " + "created");
  // }
  //
  // mounted() {
  //   console.log("LyHeader " + "mounted");
  // }
  //
  // beforeDestroy() {
  //   console.log("LyHeader " + "beforeDestroy");
  // }
  //#endregion
  //#region comp getter =================================
  //#endregion
  //#region server data =================================
  //#endregion
  //#region components Func =================================
  //#endregion
  //#region Public Func =================================
  //#endregion
  //#region view layout =================================
  //#endregion
}
</script>
<style lang="scss"></style>
<style scoped lang="scss">
@import "src/assets/styles/variables.scss";
.vaw-header-layout {
  height: $logoHeight;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .logo-wrapper {
    width: $menuWidth;
  }
  .menu-wrapper {
    flex: 1;
    overflow: hidden;
  }
  .right-wrapper {
    min-width: calc(#{$menuWidth} / 3 * 2);
    height: 100%;
  }
  .avatar-wrapper {
    padding-right: 25px;
  }
}
::v-deep {
  .el-menu--horizontal > .el-menu-item {
    height: $logoHeight;
    line-height: $logoHeight;
  }
}
</style>
